<template>
	<view class="page-box">
		<uni-cusTitle title=' ' :isIcon='true' img='/static/index/jiantou1.png'></uni-cusTitle>
		
		<view class="lunbo-box">
			<view class="wh100 swiper-tem">
				<swiper class="wh100" @change="change" :current="swiperDotIndex" autoplay circular :interval='2000'>
					<swiper-item v-for="(item, index) in swiperList" :key="index" @click="itemTap(item,index)">
						<view class="wh100">
							<image class="wh100" :src="item.cover_imgurl"></image>
						</view>
					</swiper-item>
				</swiper>
				<view class="pages-box"> {{current+1}} / {{swiperList.length}} </view>
			</view>
		</view>

		<view class="detail-box">
			<view class="title">{{detail.title}}</view>
			<view class="detail" v-html="detail.content"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				staticUrl:this.$base.staticUrl,
				current: 0,
				swiperList: [{
						cover_imgurl: '/static/share.jpg'
					},
					{
						cover_imgurl: '/static/logo.png'
					},
					{
						cover_imgurl: '/static/top_back.png'
					}
				],

				detail: {
					title: "美食探店 I 溧水小众咖啡馆推荐",
					content: `正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容
正文内容正文内容正文内容正文内容正文内容正文内容正文内容<p>1111111111111111111111111111111111111111111111111111111111111</p>正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容`
				}
			}
		},

		onLoad() {

		},
		methods: {
			change(e) {
				this.current = e.detail.current;
			}
		}
	}
</script>

<style scoped lang="scss">
	.lunbo-box {
		width: 100%;
		height: 912rpx;
		position: relative;

		.pages-box {
			width: 80rpx;
			height: 40rpx;
			position: absolute;
			bottom: 80rpx;
			right: 26rpx;
			background: #FFFFFF;
			border-radius: 21rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			font-size: 26rpx;
			font-weight: bold;
			color: #000;
		}
	}

	.detail-box {
		width: 100%;
		padding: 36rpx 30rpx;
		box-sizing: border-box;
		margin-top: -60rpx;
		position: relative;
		background: #FAEDFC;
		border-top-right-radius: 64rpx;

		.title {
			font-size: 48rpx;
			font-weight: bold;
			color: #002A3A;
			line-height: 56rpx;
		}

		.detail {
			margin-top: 20rpx;
			font-size: 32rpx;
			color: #3A525E;
			line-height: 48rpx;
			word-break: break-all;
		
			    .detail p {
			        white-space: pre; /* 保持原始空格和换行 */
			        word-break: break-all; /* 单词断开时也会换行 */
			    }
			
		}
	}
</style>